<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜单动作配置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <#include "../../include/layui.ftl" />
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <form class="layui-form layui-form-pane" action="/console/menu/rewrite/config" lay-filter="layer-from" onsubmit="beforeSubmit()">
            <input type="hidden" name="id">
            <input type="hidden" name="motionJsonArray">
            <div class="layui-form-item" hidden>
                <div class="layui-input-block">
                    <button id="permissionSubmit" class="layui-btn" lay-submit lay-filter="*" >
                        保存
                    </button>
                </div>
            </div>
        </form>
        <div class="layui-card-body">
            <table id="lay-table" lay-filter="lay-table"></table>
        </div>
    </div>
</div>
<script>
    var table = null;
    var $ = null;
    layui.config({
        base: '${path}/plug-in/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','tables','form','layer'],function () {
        var tables = layui.tables,
            layer = layui.layer,
            form = layui.form;
        $ = layui.$;
        table = layui.table;
        var parmer = {
            url: "/console/com.fs.common.pojo.Motion/list",
            where:{sort:'motion_code',order:'asc'},
            page:false,
            limit:99,
            toolbar: false,
            height: 'full-50',
            cols:[[
                {type:'numbers'}
                ,{type:'checkbox'}
                ,{field:"motionCode",width:100,title:"动作编码"}
                ,{field:"motionName",width:100,title:"动作名称",edit:"text"}
                ,{field:"motionOrder",width:100,title:"动作排序",edit:"text"}
            ]],
            done: function(res, curr, count){
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                var ids = [];
                var param = { menuId: parent._data.id, menuId_searchType: "eq"};
                $.getJSON("/console/com.fs.common.pojo.MenuMotion/list", param ,function(data){
                    $.each(data.data.rows,function(idx,m){
                        ids.push(m);
                    });
                    //在缓存中找到id ,然后设置data表格中的选中状态
                    //循环所有数据，找出对应关系，设置checkbox选中状态
                    for(var i=0;i< res.data.length;i++){
                        for (var j = 0; j < ids.length; j++) {
                            //数据id和要勾选的id相同时checkbox选中
                            if(res.data[i].id == ids[j].motionId) {
                                //这里才是真正的有效勾选
                                res.data[i]["LAY_CHECKED"]='true';
                                //找到对应数据改变勾选样式，呈现出选中效果
                                var index= res.data[i]['LAY_TABLE_INDEX'];
                                $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                                $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                                //修改对应的数据
                                res.data[i].motionName = ids[j].motionName;
                                res.data[i].motionOrder = ids[j].motionOrder;
                                //修改对应的显示数据
                                $('.layui-table tr[data-index=' + index + '] td[data-field=motionName] div').html(ids[j].motionName);
                                $('.layui-table tr[data-index=' + index + '] td[data-field=motionOrder] div').html(ids[j].motionOrder);
                            }
                        }
                    }
                });
            }
        };
        var $tables = tables.renderTable(parmer);

        form.val("layer-from", $.extend(true,{},parent._data));
    });

    function beforeSubmit() {
        var checkStatus = table.checkStatus('lay-table');
        var motionJsonArray = JSON.stringify(checkStatus.data);
        $("input[name=motionJsonArray]").val(motionJsonArray);
    }
</script>
</body>
</html>